<template>
    <div class="head-line">上班打卡</div>
    <div class="but-content">
        <button type="submit" @click="takeCard">点击打卡</button>
    </div>
</template>
<script>
    import { ref, reactive, onMounted } from "vue";
    import axios from 'axios';

    import { FormInstance, FormRules } from 'element-plus';
    import { ElMessage } from 'element-plus';

    // 导入刚刚定义的Pinia状态管理器中的useUserStore仓库
    import { useUser } from '@/stores/login'
    import { storeToRefs } from 'pinia'

    export default {
        name: 'SupfilemdNav',
        setup() {

            let array01;
            let userid = ref();
            // 创建变量接受
            const store = useUser();

            let { user_name, if_users } = storeToRefs(store)


            // 
            let form_datas = reactive({
                username: '',
                useraccount: '',
                usergender: '',
                userpasswd: '',
            })

            let labelPosition = ref('top');

            // 打卡天数
            let d_num = ref();
            let num = ref();

            let a_day;

            onMounted(() => {
                a_day = new Date();

                let url = "http://localhost:8080/users/";
                axios.get(url)
                    .then(function (response) {
                        // console.log(response.data.data);
                        array01 = response.data.data;

                        // 判断是哪个用户
                        for (let index = 0; index < array01.length; index++) {
                            let element1 = array01[index].username;
                            let element2 = array01[index].id;
                            let daysclocking = array01[index].daysclocking;
                            // console.log(element);

                            if (element1 === if_users.value.name) {
                                console.log("当前用户id：" + element2);
                                userid.value = element2;
                                num.value = daysclocking

                            } else {
                                console.log("失败");
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

                console.log(a_day);
            })


            // d_num.value + 1;

            // 打卡方法
            function takeCard() {
                let sql_date;
                axios.get(`http://localhost:8080/users/${userid.value}`)
                    .then(function (response) {
                        console.log(response.data.data.punchtime);
                        sql_date = response.data.data.punchtime;
                        if (a_day.getDate() != sql_date) {
                            console.log("对比成功！");
                            num.value++;
                            // console.log(a_day.getDate());

                            axios.put("http://localhost:8080/users/", {
                                id: userid.value,
                                punchtime: a_day.getDate(),
                                daysclocking: num.value
                            })
                                .then(function (response) {
                                    console.log(response);
                                })
                                .catch(function (error) {
                                    console.log(error);
                                })

                            let text_succes = "考勤已满" + num.value + "天" + ",本月结束！";
                            let text_warning = "打卡天数不满一个月，再接再厉欧！当前打卡" + num.value + "天！";
                            console.log(111);
                            if (num.value % 30 === 0) {



                                ElMessage({
                                    message: text_succes,
                                    type: 'success',
                                })
                                // num.value = 0;
                            } else {
                                // console.log("不满一个月，再接再厉欧！");
                                ElMessage({
                                    message: text_warning,
                                    type: 'warning',
                                })
                            }

                        } else {
                            ElMessage.error('每天只能打一次卡！');
                        }
                    })
                    .catch(function (error) {
                    })


            }

            return {
                labelPosition,
                form_datas,
                takeCard,
                d_num
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    .el-form {
        height: 250px;
        padding: 0 500px 0 20px;
        background: #fff;
        /* border: 1px solid red; */
    }

    .v-md-editor {
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }

    /* 打卡按钮 */
    .but-content {
        width: 100%;
        height: 600px;
        /* border: 1px solid red; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .but-content button {
        width: 250px;
        height: 250px;
        /* display: block; */
        font-size: 24px;
        color: #fff;
        box-shadow: 0 0 50px #51B37F;
        font-weight: 600;
        text-align: center;
        border-radius: 250px;
        background: #51B37F;
    }
</style>